import { Component } from "react";
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import { Input } from 'antd';
import classNames from 'classnames';

const { TextArea } = Input;
import styles from '../List.less';

class EditorGoods extends Component{
    state = {
        editorState: BraftEditor.createEditorState('<p>Hello <b>World!</b></p>'), // 设置编辑器初始内容
        outputHTML: '<p></p>'
      }
    
      componentDidMount () {
        this.isLivinig = true
        // 3秒后更改编辑器内容
        setTimeout(this.setEditorContentAsync, 3000)
      }
    
      componentWillUnmount () {
        this.isLivinig = false
      }
    
      handleChange = (editorState) => {
        this.setState({
          editorState: editorState,
          outputHTML: editorState.toHTML()
        })
      }
    
      setEditorContentAsync = () => {
        this.isLivinig && this.setState({
          editorState: BraftEditor.createEditorState('<p>你好，<b>世界!</b><p>')
        })
      }
    
    render(){
        const { editorState, outputHTML } = this.state

        return (
            <div className={styles.editor}>
                <div className={styles.flexstartwarp}>
                 <span className={styles.title}>商品描述</span>  
                 <div className={styles.width90}>
                    <TextArea  rows={4}  />
                 </div>
                </div>
                {/* <div className={classNames(styles.flexstartwarp,"editor-wrapper")}>
                <span className={styles.title}>商品编辑</span> 
                <BraftEditor
                    value={editorState}
                    onChange={this.handleChange}
                />
                </div>
                <h5>输出内容</h5>
                <div className="output-content">{outputHTML}</div> */}
            </div>
        )
    }
}

export default EditorGoods;